<template>
  <div class="root">
    <div id="headPanel">
      <span class="logo">自定义节点</span>
      <i class="gb-toggle-btn" />
    </div>
    <!-- canvas 挂载节点 -->
    <div id="graph" />
  </div>
</template>

<script>
import G6 from "@antv/g6";

const data = {
  nodes: [
    {
      id: "1",
      label: "node 1",
    },
    {
      id: "2",
      label: "node 2",
    },
    {
      id: "3",
      label: "node 3",
    },
    {
      id: "4",
      label: "node 4",
    },
  ],
  edges: [
    {
      source: "1",
      target: "2",
    },
    {
      source: "1",
      target: "3",
    },
    {
      source: "2",
      target: "4",
    },
    {
      source: "3",
      target: "4",
    },
  ],
};

export default {
  data() {
    return {
      graph: null,
    };
  },
  mounted() {
    // 创建画布
    this.$nextTick(() => {
      this.createGraphic();
    });
  },
  beforeDestroy() {
    this.graph.destroy();
  },
  methods: {
    createGraphic() {
      this.registerNode();
      const graph = new G6.Graph({
        container: document.getElementById("graph"),
        width: window.innerWidth - 40,
        height: window.innerHeight - 40,
        layout: {
          type: "dagre",
        },
        defaultNode: {
          type: "k-rect",
          style: {
            width: 180,
            height: 60,
            radius: 10,
          },
          labelCfg: {
            style: {
              fontSize: 20,
            },
          },
        },
        fitCenter: true,
      });

      graph.read(data);
      this.graph = graph;
    },
    // 注册自定义节点
    registerNode() {
      /**
       * 注册基础node(节点)=>添加锚点/图标/文本 => 绘制node => 设置node状态 => 设置交互动画
       */
      // G6.registerNode('自定义节点的名称',{
      //   // 用于绘制节点，包含文本，锚点等
      //   draw(cfg, group){
      //     /**
      //      * group:节点分组，包含节点配置，锚点，图标，文本等shape
      //      * 绘制流程：
      //      * 1.获取默认样式配置
      //      * 2.添加shape
      //      * 3.添加文本节点、锚点等
      //      * 4.return shape
      //      */
      //   },
      //   // 绘制后的附加操作
      //   afterDraw(){},
      //   // 更新节点的配置，样式等
      //   update(){},
      //   // 更新节点后的附加操作
      //   afterUpdate(){},
      //   // 设置节点状态，主要是交互状态，如hover,active等
      //   setState(){},
      //   // 用来获取当前节点的锚点坐标配置
      //   getAnchorPoints(){},
      // },'extendNodeName');
      G6.registerNode("k-rect", {
        // 绘制文本节点
        drawText(cfg, group) {
          group.addShape("text", {
            attrs: {
              x: cfg.style.width / 2,
              y: cfg.style.height / 2,
              text: cfg.label,
              fill: "#fff",
              textAlign: "center",
              textBaseline: "middle",
              ...cfg.labelCfg.style,
            },
          });
        },
        // 用于绘制节点，包含文本，锚点等
        draw(cfg, group) {
          // 1.
          const attrs = cfg;

          console.log("attrs:", attrs);

          // 2.
          const shape = group.addShape(
            "rect", //继承内置节点的shape,可选rect,circle,ellipse,path等
            {
              // 所有样式配置
              attrs: {
                fill: "#1898ff",
                ...attrs,
                ...attrs.style,
              },
            }
          );

          // 3.
          // 此处的this指向节点的实例
          this.drawText(cfg, group);

          // 4.
          return shape;
        },
        // 绘制后的附加操作
        afterDraw() {},
        // 更新节点的配置，样式等
        update() {},
        // 更新节点后的附加操作
        afterUpdate() {},
      });
    },
  },
};
</script>
